<template>
  <div>
    <!-- 定义布局容器 -->
    <el-container class="home-container">
      <!-- 定义头标签 -->
      <el-header>
        <div>
          <span>优集二手车</span>
        </div>
        <div>
          <div class="avater">
              <img :src="url" />
          </div>
          <el-button type="info" @click="logout">退出</el-button>
        </div>
      </el-header>
      <!-- 定义中间区域-->
      <el-container class="home-menu">
        <el-aside style="background: #EEF5F9;">
          <el-col>
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#EEF5F9"
                text-color="#333"
                active-text-color="#2196f3"
                router
                :default-active="defaultActive"
                >
                <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
                  <template slot="title">
                    <i :class="menuIcon[menu.id]"></i>
                    <span>{{menu.name}}</span>
                  </template>
                  <el-menu-item :index="childrenMenu.path+''" v-for="childrenMenu in menu.children" :key="childrenMenu.id"
                  @click="defaultActiveMenu(childrenMenu.path)">
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{childrenMenu.name}}</span>
                    </template>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
        </el-aside>
        <!-- 定义主页面结构-->
        <el-main>
          <!-- 定义路由展现页面-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    // 初始化函数
    created () {
      // 动态获取左侧菜单信息
      this.getMenuList()
      // 设定模式选中按钮
      this.defaultActive = window.sessionStorage.getItem('activeMenu')
    },
    data() {
      return {
        menuList: [],
        menuIcon: {
          1: 'iconfont iconuser',
          3: 'iconfont iconshangpin',
          5: 'iconfont iconicon--copy',
          7: 'iconfont iconquanxian',
          8: 'iconfont iconziyuan'
        },
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    },
    methods: {
      async getMenuList () {
        const { data: result } = await this.$http.get('/rights/getRightsList')
        console.log(result)
        if (result.status !== 200) return this.$message.error('左侧菜单查询失败')
        this.menuList = result.data
      },
      async logout () {
        // 1.删除session中的数据
        const {data: result} = await this.$http.get('/user/logout')
        if (result.status == 200)
        this.$message.success('退出成功!')
        window.sessionStorage.clear()
        //2.用户访问登录页面
        this.$router.push('/login')

      },
      defaultActiveMenu (activeMenu) {
        // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
        window.sessionStorage.setItem('activeMenu', activeMenu)
        this.defaultActive = activeMenu
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-header {
    background: linear-gradient(to left, #7b4397, #2196f3);
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
    .avater{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;
    }
    .avater img{
      width: 60px;
      height: 60px;
    }

    .el-aside {
      background: #EEF5F9;
    }
    .el-menu {
      border-right: none;
    }

    .el-main {
      background-color: #EEF5F9;
    }

    .home-container {
      height: 100%;
      width: 100%;
    }

  }
</style>
